<template>
    <a-modal :confirm-loading="modalOption.loading" :okText="modalOption.okText" @ok="modalOption.onOk"
        @cancel="modalOption.onCancel" :cancelText="modalOption.cancelText" :width="modalOption.width" :visible="visible"
        :title="modalOption.title">
        <a-card>
            <a-descriptions :column="2">
                <a-descriptions-item label="成品名称">{{detailData.prodName}}</a-descriptions-item>
                <a-descriptions-item label="产品大类">{{detailData.inventoryType}}</a-descriptions-item>
                <a-descriptions-item label="标准">{{detailData.standard}}</a-descriptions-item>
                <a-descriptions-item label="规格">{{detailData.spec}}</a-descriptions-item>
                <a-descriptions-item label="装量">{{detailData.loadingQuantity}}g/袋</a-descriptions-item>
                <!-- <a-descriptions-item label="计划编号">{{detailData.planSerial}}</a-descriptions-item> -->
                <a-descriptions-item label="计划生产量">{{detailData.prodNum}}kg</a-descriptions-item>
            </a-descriptions>
        </a-card>
        <a-card style="margin-top: 20px" title="投料信息">
            <a-table :data-source="dataSource" bordered :pagination="false">
                <a-table-column title="投料批号" key="batch" data-index="batch" align="center"></a-table-column>
                <a-table-column title="名称" key="inputName" data-index="inputName" align="center"></a-table-column>
                <a-table-column title="生产日期" key="productDate" data-index="productDate" align="center"></a-table-column>
                <a-table-column title="复验期" key="recheckDate" data-index="recheckDate" align="center"></a-table-column>
                <a-table-column title="库存数量" key="storageNum" data-index="storageNum" align="center"></a-table-column>
                <a-table-column title="质量状态" key="qualityState" data-index="qualityState" align="center"></a-table-column>
                <a-table-column v-if="detailData.inventoryType ==='C60'" title="投料量" key="inputNumSixty" data-index="inputNumSixty" align="center"></a-table-column>
                <a-table-column v-if="detailData.inventoryType ==='C70'" title="投料量" key="inputNumSeventy" data-index="inputNumSeventy" align="center"></a-table-column>
                <a-table-column v-if="detailData.inventoryType ==='C80'" title="投料量" key="inputNumEighty" data-index="inputNumEighty" align="center"></a-table-column>
                <a-table-column v-if="detailData.inventoryType ==='C90'" title="投料量" key="inputNumNinety" data-index="inputNumNinety" align="center"></a-table-column>
            </a-table>
        </a-card>
    </a-modal>
</template>
<script lang="ts">
import nextApi from "@/api/nextApi";
import warningApi from "@/api/warningApi";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({
    name: "detail",
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) detailData!: any;

    @Watch("visible")
    visibleChange(val: boolean) {
        if (val) {
            this.getTableData();
        }
    }
    //组件配置
    modalOption: any = {
        width: "90%",
        title: "详情",
        okText: "确定",
        cancelText: "取消",
        loading: false,
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };

    //表格数据源
    dataSource: any = [];

    /**
     * @description 一些数据处理和逻辑
     * **/
    async getTableData() {
        console.log('@@@');
        
        this.modalOption.loading = true;
        try {
            const res = await nextApi.getListDataOfDetail({ id: this.detailData.id });
            this.dataSource = res.data?.processPlanInputNewList || [];
        } finally {
            this.modalOption.loading = false;
        }

    }
    modalOk() {}
    closeModal() {
        this.$emit("closeModal");
    }
}
</script>
<style scoped lang="scss">
</style>
